<template>
  <div>
    <child-component>
      <h2 slot='header'>标题</h2>
      <p>正文内容</p>
      <p>更多的正文内容</p>
      <div slot="footer">底部信息</div>
    </child-component>
  </div>
</template>
<script>
export default {
  data(){
    return{
      
    }
  },
  components:{
    'child-component':{
      template: `
        <div class="container">
          <div class="header">
            <slot name="header"></slot>
          </div>
          <div class="main">
            <slot></slot>
          </div>
          <div class="footer">
            <slot name="footer"></slot>
          </div>
        </div>
      `,
      data(){
        return{
          message: '子组件内容'
        }
      }
    }
  }
}
</script>
<style scoped>

</style>


